<!-- 房源详情页 -->

<div style="margin: 20px 15px ;height: 150px;width: 100%">
    <div style="float: left ;height: 150px;width: 11%">
        <img src="/dist/img/noPicture_150.jpg">
    </div>
    <div style="float: left;width: 85%;background-color: white;">
        <div style="height: 60px;padding: 20px 0px 0px 50px">
            <strong>华二小区（车站北路624弄）&nbsp;&nbsp;&nbsp;&nbsp;</strong>
            <button type="button" class="btn btn-warning" style="height: 30px;margin-right: 30px">查看室号</button>
            <font style="border-color: red ;border-style: solid ;border-width: 1px;color: red">&nbsp;&nbsp;<i class="glyphicon glyphicon-remove-sign"></i>&nbsp;未推外网&nbsp;&nbsp;</font>
            <button type="button" class="btn btn-danger"style="height: 20px;padding-top: 0px;margin-left: -4px">查看</button>
            <button type="button" class="btn btn-danger" style="height: 20px;padding-top: 0px;margin-left: 50px">楼盘B</button>
            <button type="button" class="btn btn-danger" style="height: 20px;padding-top: 0px;margin-left: 50px">申请精选房源</button>
        </div>
        <div style="height: 50px;padding: 5px 0px 0px 50px">
            <div style="float: left"><i class="glyphicon glyphicon-tags"style="margin-right: 5px"></i>shhk50000005468</div>
            <div style="float: right ;width: 600px" >
                <button class="btn btn-default" type="submit" style="margin-right: 40px"> <i class="glyphicon glyphicon-star-empty"></i> 个人</button>
                <button class="btn btn-default" type="submit" style="margin-right: 40px"> <i class="glyphicon glyphicon-heart"></i> 摊内</button>
                <select style="margin-right: 40px;background-color: #ff6600;color: white;width: 80px;height: 30px;">
                    <option >操作</option>
                    <option >a</option>
                    <option >b</option>
                </select>
                <select style="margin-right: 40px;background-color: #ff6600;color: white;width: 80px;height: 30px;">
                    <option >查看</option>
                    <option >c</option>
                    <option >d</option>
                </select>
            </div>
        </div>
        <div style="height: 40px;padding: 5px 0px 0px 50px">
            <div><i class="glyphicon glyphicon-list-alt" style="margin-right: 5px"></i>满5唯一 产权两个人 户口一家人 好迁走 贷款没有 看房提前约</div>
        </div>
    </div>
</div>

<script>
    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
    $('#myTabs a[href="#profile"]').tab('show') // Select tab by name
    $('#myTabs a:first').tab('show') // Select first tab
    $('#myTabs a:last').tab('show') // Select last tab
    $('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
</script>

<div style="margin: 30px 15px ;background-color: salmon ;height: 40px">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#base" aria-controls="base" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>基本信息</strong></a></li>
        <li role="presentation"><a href="#key" aria-controls="key" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>钥匙</strong></a></li>
        <li role="presentation"><a href="#look" aria-controls="look" role="tab" data-toggle="tab" style="margin-right: 30px" id="activeUpload"><strong>实勘</strong></a></li>
        <li role="presentation"><a href="#msg" aria-controls="msg" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>跟进</strong></a></li>
        <li role="presentation"><a href="#take" aria-controls="take" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>带看</strong></a></li>
        <li role="presentation"><a href="#bok" aria-controls="bok" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>配套方案</strong></a></li>
        <li role="presentation"><a href="#role" aria-controls="role" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>角色</strong></a></li>
        <li role="presentation"><a href="#down-msg" aria-controls="down-msg" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>成交信息</strong></a></li>
        <li role="presentation"><a href="#title" aria-controls="title" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>房友网标题</strong></a></li>
        <li role="presentation"><a href="#zz" aria-controls="zz" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>佐证</strong></a></li>
        <li role="presentation"><a href="#scole" aria-controls="scole" role="tab" data-toggle="tab" style="margin-right: 30px"><strong>学区</strong></a></li>
    </ul>
</div>

<div class="tab-content" style="margin: -29px 15px;height: 800px;background-color: white;padding-top: 30px;width: 100%">
    <div role="tabpanel" class="tab-pane active" id="base" style="height: 750px;margin-left: 30px ">
        <div style="width: 100% ;height: 100px">
            <div style="float: left;width:5% " >
                <img src="/dist/img/dlrb_100.jpg">
            </div>
            <div style=" float: left ;background-color: lightgrey ;width: 85%;height: 100px">
                <div style="width: 550px ;height: 50px">
                    <div style="margin: 15px 0px 15px 15px ;float: left ">
                        楼主
                    </div>
                    <div style="float: right;margin: 15px 0px ">
                        <a>查看上级及详情</a>
                    </div>
                </div>
                <div style="margin-left: 15px">
                    迪丽热巴 / 物业顾问 / 房友灵新分行1组
                </div>
            </div>
        </div>
        <div style="background-color: white;height: 230px ;width: 100%;border-bottom-style: solid;border-bottom-color: lightgrey;border-bottom-width: 2px">
            <div style="height: 100%;padding-top: 20px;width: 5%;margin-right: 50px ;float: left">
                <img src="/dist/img/smallHouse_60.jpg">
            </div>
            <div style="float: left;width: 85%">
                <table>
                    <tr style="height: 55px">
                        <td style="width: 350px">挂牌价：320 万</td>
                        <td style="width: 350px">底价： 320 万</td>
                        <td style="width: 350px">原购价： 0 元</td>
                        <td style="width: 350px">单价： 5.8 万/平</td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">建筑面积： 55.08 平</td>
                        <td style="width: 350px">户型： 2-0-1-1 </td>
                        <td style="width: 350px">竣工： 1992年</td>
                        <td style="width: 350px">楼层： 高层</td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">房屋用途： 住宅</td>
                        <td style="width: 350px">房屋类型： 住宅</td>
                        <td style="width: 350px">朝向： 南</td>
                        <td style="width: 350px">总层： 6层</td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">电梯房： 否</td>
                        <td style="width: 350px">梯户比例： 0梯2户</td>
                        <td style="width: 350px">挂牌时间： 2020-09-19 10:11</td>
                    </tr>
                </table>
            </div>
        </div>

        <div style="background-color: white;height: 125px ;width: 100%;border-bottom-style: solid;border-bottom-color: lightgrey;border-bottom-width: 2px">
            <div style="height: 100%;padding-top: 20px;width: 5%;margin-right: 50px ;float: left">
                <img src="/dist/img/book_60.jpg">
            </div>
            <div style="float: left ;width: 85%">
                <table>
                    <tr style="height: 55px">
                        <td style="width: 350px">现状： 吉房</td>
                        <td style="width: 350px">租期至： </td>
                        <td style="width: 350px">物业费： </td>
                        <td style="width: 350px">装修： 装修不详</td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">来源： </td>
                        <td style="width: 350px">看房时间： </td>
                        <td style="width: 350px">预计交房时间： </td>
                    </tr>
                </table>
            </div>
        </div>

        <div style="background-color: white;height: 180px ;width: 100%;border-bottom-style: solid;border-bottom-color: lightgrey;border-bottom-width: 2px">
            <div style="height: 100%;padding-top: 20px;width: 5%;margin-right: 50px ;float: left">
                <img src="/dist/img/book_60.jpg">
            </div>
            <div style="float: left;width: 85%">
                <table>
                    <tr style="height: 55px">
                        <td style="width: 350px">产权： </td>
                        <td style="width: 350px">共有情况： </td>
                        <td style="width: 350px">产权人： </td>
                        <td style="width: 350px">产证日期： </td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">产权备注： </td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">是否贷款： </td>
                        <td style="width: 350px">剩余贷款金额： </td>
                        <td style="width: 350px">是否要付首付还贷</td>
                    </tr>
                </table>
            </div>
        </div>

        <div style="background-color: white ;width: 100%;height: 120px">
            <div style="height: 100%;padding-top: 20px;width: 5%;margin-right: 50px ;float: left">
                <img src="/dist/img/book_60.jpg">
            </div>
            <div style="float: left;width: 85%">
                <table>
                    <tr style="height: 55px">
                        <td style="width: 350px">业主电话：</td>
                    </tr>
                    <tr style="height: 55px">
                        <td style="width: 350px">
                            <button type="button" class="btn btn-danger">查看电话</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </div>
    <div role="tabpanel" class="tab-pane" id="key">2</div>
    <!--图片上传 -->
    <script>
        $(function () {
            // 默认上传按钮不可用
            $("#btnUpload").attr("disabled", true);

            // 弹出上传Model
            $("#activeUpload").click(function(){
                $("#uploadModal").modal("show");
            })

            // 上传按钮点击事件
            $("#btnUpload").click(function() {
                //上传按钮修改为可用
                $(this).attr("disabled", true);
                uploadFunction();
            })

            // 文件修改时
            $("#uploadFile").change(function() {
                $("#btnUpload").val("上传");
                var file = $(this).prop("files");
                if (file.length != 0) {
                    $("#btnUpload").attr("disabled", false);
                }
            });

            //文件上传
            function uploadFunction() {
                var uploadFile = $("#uploadFile").get(0).files[0]; //获取文件对象

                // FormData 对象
                var form = new FormData();
                form.append("file", uploadFile); // 文件对象
                var uploadUrl = "<%=path%>/file/upload";//异步上传地址
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: uploadUrl,
                    contentType: false,
                    processData: false,
                    data: form,
                    xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
                        myXhr = $.ajaxSettings.xhr();
                        if(progressFunction && myXhr.upload) { //检查进度函数和upload属性是否存在
                            //绑定progress事件的回调函数
                            myXhr.upload.addEventListener("progress",progressFunction, false);
                        }
                        return myXhr; //xhr对象返回给jQuery使用
                    },
                    error: function(request) {
                        alert("Connection error");
                    },
                    success: function(data) {
                        $("input[name=companyLicenseImg]").val(data);
                        $("#licenseImg").attr("src","<%=path%>"+data); //将后台返回图片路径设置给IMG，显示图片
                        $("#licenseImg").attr("width","100");
                        $("#activeUpload").val("重新上传");

                        $("#btnUpload").attr("disabled", false);
                        $("#btnUpload").val("上传");
                        $("#uploadModal").modal("hide");
                    }
                });
            }

            //进度条控制
            function progressFunction(evt) {
                if (evt.lengthComputable) {
                    var completePercent = Math.round(evt.loaded / evt.total * 100)+ "%";
                    $("#btnUpload").val("正在上传,进度：" + completePercent);
                }
            }
        });
    </script>
    <div role="tabpanel" class="tab-pane" id="look" style="height: 800px ;width: 100%">

        <!-- Modal -->
        <div id="uploadModal" class="modal fade" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <i class="glyphicon glyphicon-camera"></i> &nbsp;录入实勘
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group" id="passwordDiv">
                            <label>户型图</label>
                            <input class="form-control" type="file" id="houseModel">
                            <br/>
                            <hr/>
                            <label>室</label>
                            <input class="form-control" type="file" id="fj1">
                            <input class="form-control" type="file" id="fj2">
                            <br/>
                            <hr/>
                            <label>厅</label>
                            <input class="form-control" type="file" id="ting1">
                            <input class="form-control" type="file" id="ting2">
                            <br/>
                            <hr/>
                            <label>厨房</label>
                            <input class="form-control" type="file" id="cf">
                            <br/>
                            <hr/>
                            <label>卫生间</label>
                            <input class="form-control" type="file" id="wsj">
                            <br/>
                            <hr/>
                            <label>阳台</label>
                            <input class="form-control" type="file" id="yt">
                        </div>
                        <div class="form-group">
                            <input id="btnUpload" type="submit" name="submit" class="btn btn-success" value="上传" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div role="tabpanel" class="tab-pane" id="msg" style="width: 100%;height: 500px;padding: 10px 20px">
        <div style="width: 100%;height: 60px;border-bottom-color: lightgrey;border-bottom-style: solid;border-width: 1px">
            <i class="glyphicon glyphicon-search" style="margin-top: -10px;padding: 10px 10px;margin-right: 8%;background-color: goldenrod;color: white;width: 35px;height: 35px"></i>
            跟进类型&nbsp;&nbsp;
            <select style="width: 15% ;height: 25px;margin-right: 15%">
                <option>请选择</option>
            </select>
            跟进内容&nbsp;&nbsp;<input type="text" style="width: 15%;margin-right: 8%">
            <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-search"></i>&nbsp;搜索</button>
            <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-trash"></i>&nbsp;清空</button>
        </div>
        <div style="width: 100% ;height: 40px;padding: 10px  0px">
            <i class="glyphicon glyphicon-file" style="margin-top: -10px;padding: 10px 10px;margin-right: 2%;background-color: goldenrod;color: white;width: 35px;height: 35px"></i>
            最近跟进
        </div>
        <div style="width: 100%;height: 40px;background-color: lightgrey">
            <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                跟进时间
            </div>
            <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                跟进人
            </div>
            <div style="text-align: center;height: 100%;width: 15%;float: left;padding-top: 10px">
                跟进类型
            </div>
        </div>

        <div style="border-width: 1px;border-style: solid;border-color: lightgrey;width: 100%;height: 120px;padding: 5px 10px">
            <div style="width: 100%;height: 40px">
                <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                    2020-09-19 10:11
                </div>
                <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                    吴涛涛/经纪人(通州分行1组)
                </div>
                <div style="text-align: center;height: 100%;width: 15%;float: left;padding-top: 10px">
                    信息补充
                </div>
            </div>
            <div style="width: 100%;height: 80px">
                <div style="height: 100%;width: 100%;padding-top: 10px">
                    满五唯一 产权两个人 户口一家人 好迁走 贷款没有 看房子方便.提前约
                </div>
            </div>
        </div>
        <div style="border-width: 1px;border-style: solid;border-color: lightgrey;width: 100%;height: 120px;padding: 5px 10px">
            <div style="width: 100%;height: 40px">
                <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                    2020-09-19 10:11
                </div>
                <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                    吴涛涛/经纪人(通州分行1组)
                </div>
                <div style="text-align: center;height: 100%;width: 15%;float: left;padding-top: 10px">
                    信息补充
                </div>
            </div>
            <div style="width: 100%;height: 80px">
                <div style="height: 100%;width: 100%;padding-top: 10px">
                    满五唯一 产权两个人 户口一家人 好迁走 贷款没有 看房子方便.提前约
                </div>
            </div>
        </div>
        <div style="border-width: 1px;border-style: solid;border-color: lightgrey;width: 100%;height: 120px;padding: 5px 10px">
            <div style="width: 100%;height: 40px">
                <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                    2020-09-19 10:11
                </div>
                <div style="text-align: center;height: 100%;width: 35%;float: left;padding-top: 10px">
                    吴涛涛/经纪人(通州分行1组)
                </div>
                <div style="text-align: center;height: 100%;width: 15%;float: left;padding-top: 10px">
                    信息补充
                </div>
            </div>
            <div style="width: 100%;height: 80px">
                <div style="height: 100%;width: 100%;padding-top: 10px">
                    满五唯一 产权两个人 户口一家人 好迁走 贷款没有 看房子方便.提前约
                </div>
            </div>
        </div>



    </div>
    <div role="tabpanel" class="tab-pane" id="take">5</div>
    <div role="tabpanel" class="tab-pane" id="bok">6</div>
    <div role="tabpanel" class="tab-pane" id="role">7</div>
    <div role="tabpanel" class="tab-pane" id="down-msg">8</div>
    <div role="tabpanel" class="tab-pane" id="title">9</div>
    <div role="tabpanel" class="tab-pane " id="zz">10</div>
    <div role="tabpanel" class="tab-pane" id="scole">11</div>
</div>

